import React, { FC, memo } from 'react';
import { Button, Toast } from 'antd-mobile';
import { IOrderItemProps } from '@/interface';
import { timeFormat } from '@/utils';
import { fetchPayOrder } from '@/api/order';

interface IItemProps extends IOrderItemProps {
  houses: IOrderItemProps;
  createTime: string;
  type: number | string;
  id: string;
}

const Item: FC<IItemProps> = props => {
  const {
    houses: { imgs, name, price },
    createTime,
    type,
    id,
  } = props;

  const renderPay = () => {
    switch (type) {
      case 0:
        return (
          <Button type="warning" size="small">
            去支付
          </Button>
        );
      case 1:
        return <Button size="small">已完成</Button>;
      default:
        break;
    }
  };

  const handlePay = async () => {
    const { errorCode } = await fetchPayOrder({
      id,
    });
    if (errorCode === 0) {
      Toast.success('支付成功');
      window.location.reload();
    }
  };

  return (
    <div className="item-wrap">
      <img src={imgs[0].url} />
      <div className="center">
        <div className="title">{name}</div>
        <div className="price">￥{price}</div>
        <div className="time">{timeFormat(createTime)}</div>
      </div>
      <div className="pay" onClick={handlePay}>
        {renderPay()}
      </div>
    </div>
  );
};

export default memo(Item);
